<template>
<!-- 侧边栏菜单和logo-固定 -->
    <div>
        <!-- <el-radio-group v-model="isCollapse" iCstyle="margin-bottom: 20px;"> -->
            <!-- <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                :title="isCollapse ? '展开' : '收起'"
                :label="isCollapse ? 'isCollapse:false' : 'isCollapse:true'"
                class="iconfont"
            ></i> -->
        <!-- <div><i class="iconfont" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" :label="isCollapse ? false : true"></i></div> -->
            <!-- <el-radio-button :label="true">收起</el-radio-button> -->
        <!-- </el-radio-group> -->
        <el-row v-if="!isCollapse" class="header-logo">
          <el-col class="logo"><span>— B E I —</span></el-col>
        </el-row>
        <el-menu :router=true :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">相关信息</span>
                </template>
                <el-menu-item-group>
                    <span slot="title">分组一</span>
                    <el-menu-item index="/relaedinfo">基础信息</el-menu-item>
                    <el-menu-item index="1-2">站内信息</el-menu-item>
                </el-menu-item-group>
                <!-- <el-submenu index="1-4">
                    <span slot="title">选项4</span>
                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu> -->
            </el-submenu>
            <el-submenu index="/artmess">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">内容管理</span>
                </template>
                <el-menu-item-group>
                  <span slot="title"></span>
                    <el-menu-item index="/newarticle">发表文章</el-menu-item>
                    <el-menu-item index="/articlemg">文章查看 / 编辑 / 删除</el-menu-item>
                    <el-menu-item index="/comments">评论审核</el-menu-item>
                    <el-menu-item index="/leav">留言管理</el-menu-item>
                    <!-- <el-menu-item index="/videos">视频管理</el-menu-item> -->
                </el-menu-item-group>
                <el-submenu index="">
                    <span slot="title">视频管理</span>
                    <el-menu-item index="/videos">添加视频</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="3">
                <i class="el-icon-document"></i>
                <span slot="title">分类管理</span>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">页面管理</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
import Bus from '../../modules/bus'
  export default {
    data() {
      return {
        isCollapse: false,
        activeIndex: '/'
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    created() {
      Bus.$on('isCollapse', (val, vall) => {
        this.isCollapse = val;
        console.log('第一个val参数：',val)
        console.log('第二个vall参数：',vall)
      })
    }
  }
</script>

<style scoped>
.el-menu {
  border-right: 0;
  background-color: rgb(236, 236, 236);
}
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100%;
    min-height: 400px;
    text-align: left;
    border: 0;
  }
  .el-row {
    text-align: center;
    border-bottom: 1px solid #fff;
  }
  .el-col span{
    display: inline-block;
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
    position: relative;
    /* vertical-align: top; */
    font-size: 30px;
    font-weight: bolder;
    height: 59px;
    line-height: 59px;
}
  .el-radio-button{
      position: absolute;
  }
  .el-icon-s-unfold, .el-icon-s-fold{
      font-size: 22px;
  }
  .iconfont{
      
      margin-bottom: 30px;
  }
</style>